<template>
  <div class="_no-drag-area">
    <menu-inner
      v-if="dialogVisible"
      :close-modal="closeModal"
      :inner-style="innerStyle"
    >
      <template #content>
        <slot name="content" />
      </template>
    </menu-inner>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default:false
  },
  innerStyle: {
    type: String,
    default:''
  }
})
const emit = defineEmits(['update:modelValue'])

const dialogVisible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const closeModal = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss"></style>
